<!-- @format -->

<template>
  <view class="container">
    <view class="top">
      <view class="title">编辑出行日期与商品</view>
      <view class="edit-date" @click="changeTravelDate">
        <text class="status-text">修改出行日期：{{ travelDate }}</text>
        <img
          class="edit-icon"
          src="https://cdn1.visiotrip.com/h5AndMini/2023-09-14/edit_date-2.png"
        />
      </view>
    </view>
    <scroll-view class="scroll-view_H nav" scroll-x>
      <view
        class="scroll-view-item_H"
        :class="currentTab == index? 'active' : 'nav-item'"
        v-for="(item, index) in tabList"
        @click="changeTab(index)"
        :key="index"
        :data-spmCntSuffix="'ChatAiPage.editJournel@1.tag'"
        :data-custom="index + 1"
        :data-spm="item"
      >
        Day{{ index + 1 }}
        <img
          v-if="currentTab == index"
          class="icon"
          src="../../../static/ai/icon/tab_icon.png"
        />
      </view>
    </scroll-view>
    <view class="middle" >
      <scroll-view
        v-if="itineraryData"
        :scroll-top="scrollTop"
        :scroll-y="canScroll"
        class="scroll-Y"
        :scroll-into-view="scrollInto"
        :scroll-with-animation="true"
      >
        <view
          class="content"
          v-for="(day, index) in itineraryData.dayNodeList"
          :key="index"
          :id="'item-' + index"
          :data-index="index"
        >
          <view class="day-index">
            <view class="title">D{{ index + 1 }}</view>
            <view class="day-content">
              <block
                v-if="day.simplePoiNodeList && day.simplePoiNodeList.length > 0"
              >
                <view
                  v-for="(poi, poiIndex) in day.simplePoiNodeList"
                  :key="poi.poiId"
                  :data-spmCntSuffix="'ChatAiPage.editJournel@2.poi'"
                  :data-custom="poiIndex + 1"
                  :data-spm="poi"
                >
                  <delSlideLeft
                    :canSlide="poi.productList.length > 9999"
                    :item="{ ...poi, index }"
                    @delItem="handleDel()"
                  >
                    <view class="scenic-spot">
                      <!-- <img
                        class="del-btn"
                        src="https://cdn1.visiotrip.com/h5AndMini/2023-07-11/icon_delet%402x.png"
                      /> -->
                      <view class="poi-info-box">
                        <view class="desc">
                          <img class="poiImgUrl" :src="poi.poiImgUrl" />
                          <view class="poiInfo">
                            <view class="desc-item name">
                              {{ poi.poiName }}
                            </view>
                            <view
                              v-if="poi.openingHours"
                              class="desc-item single-line-text"
                            >
                              {{ poi.openingHours }}
                            </view>
                            <view
                              v-if="poi.address"
                              class="desc-item single-line-text"
                            >
                              景区地址: {{ poi.address }}
                            </view>
                            <view class="desc-tag" v-if="poi.poiTypeId == 1">
                              <text>{{poi.requiredTickets ? '' : '无'}}需购票</text>
                              <text class="grey">{{poi.ticketsMsg}}</text>
                            </view>
                          </view>
                        </view>
                        <view class="index">
                          {{ poiArr.findIndex((val) => val.poiId === poi.poiId) + 1 }}
                        </view>
                      </view>
                      <view class="goods-list">
                        
                        <block
                          v-if="poi.productList && poi.productList.length > 0"
                        >
                          
                          <view
                            class="goods-card"
                            v-for="product in poi.productList"
                            :key="product.stdId"
                          >
                            <view class="product-tips omit1">{{product.productTypeName}}</view>
                            <view class="desc">
                              <view class="desc-item name-and-price single-line-text">
                                <text class="name single-line-text" style="display: unset">{{ product.stdName }}</text>
                              </view>
                              <text class="desc-item">{{
                                product.travelDate
                              }}</text>
                              <view class="sku-box">
                                <view
                                  class="sku"
                                  v-for="sku in product.skuProductList"
                                  :key="sku.skuId"
                                >
                                  <view class="name-quantities-box"
                                    ><view class="sku-name">{{
                                      sku.skuName
                                    }}</view
                                    ><view
                                      >{{ sku.priceOfUnit }} x
                                      {{ sku.quantities }}</view
                                    ></view
                                  >
                                </view>
                              </view>
                            </view>
                            <view
                              class="pick-goods"
                              @click.stop="
                                handleInProductPick(
                                  day,
                                  index,
                                  poiIndex,
                                  poi,
                                  product
                                )
                              "
                              > 
                              <!-- {{product.productType == '04'?'挑选酒店':'挑选商品'}} -->
                              修改
                            </view>
                          </view>
                        </block>
                        <!-- <view class="nodata-card" v-if="showNoProduct(poi)">
                          <view class="desc">
                            <text class="desc-item"
                              >暂无商品，去挑选一个喜欢的商品吧</text
                            >
                          </view>
                          <view
                            class="pick-goods"
                            @click="handleInPOIPick(day, poi, '01')"
                            >挑选商品</view
                          >
                        </view>
                        <view class="nodata-card" v-if="showNoHotel(poi)">
                          <view class="desc">
                            <text class="desc-item"
                              >未订酒店，去挑选一家喜欢的酒店吧</text
                            >
                          </view>
                          <view
                            class="pick-goods"
                            @click="handleInPOIPick(day, poi, '04')"
                            >挑选酒店</view
                          >
                        </view> -->
                      </view>
                    </view>
                  </delSlideLeft>
                  <view v-show="poiIndex < day.simplePoiNodeList.length - 1">
                    <text
                      class="distance"
                    >{{ poi.distance }}km</text>
                    <text class="distance" v-if="false">，地铁40分钟</text>
                  </view>
                </view>
              </block>
              <view v-else>当天无行程，可自由规划哦～</view>
            </view>
          </view>
        </view>
      </scroll-view>
      <view v-if="!itineraryData" class="day-no-poi">今天没有安排行程哦~</view>
    </view>
    <view class="bottom">
      <text class="cancel" 
        @click="handleItineraryCancel"
        :data-spmCntSuffix="'ChatAiPage.editJournel@3.cancel'"
        :data-custom="1"
        :data-spm="1"
      >取消</text>
      <text class="confirm" 
        :class="{'active':!itineraryData}" 
        @click="handleItinerarySure"
        :data-spmCntSuffix="'ChatAiPage.editJournel@3.confirm'"
        :data-custom="1"
        :data-spm="1"
      >确认修改</text>
    </view>
    <uni-popup
      ref="pick"
      background-color="#fff"
      @close="handlePickPopupCancel"
      :safeArea="false"
    >
      <view class="pick-popup" v-if="itineraryData">
        <view :style="{ height: navHeight + 'px', 'background': '#ffffff' }">
           <view class="title" :style="{ marginTop: navTop + 'px',	height: '32px',
	'lineHeight': '32px'}">挑选商品</view>
        </view>
        <scroll-view scroll-y class="pick-scroll">
          <view
            class="pick-content"
            v-if="pickCurrProduct || pickRecProductList"
          >
            <view
              class="product-group"
              v-for="(productList, rootIndex) in compositeData"
              :key="`${rootIndex}-pick`"
            >
              <text class="date" v-if="rootIndex == 0">{{
                `出行日期：${itineraryData.travelDate}`
              }}</text>
              <text
                style="font-weight: 600;font-size: 28rpx;color: #131328;line-height: 28rpx;padding: 10rpx 0 30rpx 0"
                v-if="rootIndex == 1 && productList && productList.length > 0"
                >{{ "以下为推荐商品" }}</text
              >
              <block v-if="productList !== null && productList.length > 0">
                <view
                  class="product-section"
                  v-for="(product, productIndex) in productList"
                  :key="productIndex"
                >
                  <view v-if="product">
                    <view class="product-section-top" >
                      <image
                        :src="product.mainPictureUrl"
                        mode="scaleToFill"
                        class="product-img"
                      />
                      <view class="product-section-right">
                        <view 
                          @click.stop="() => {productUrlJump(product)}"
                          style="display:flex;align-items: center;color: #131328;font-size: 32rpx;line-height: 46rpx">
                          <view> {{ product.stdName }} </view>
                          <img src="https://cdn1.visiotrip.com/h5AndMini/2024-0516/select.png" style="width: 27rpx;height: 26rpx">
                        </view>
                        <view class="product-section-time omit" v-if="product.productType != '04'">营业时间：{{product.businessHoursStr}}</view>
                        <view class="product-section-time omit">地址：{{product.address}}</view>
                      </view>
                    </view>
                    <view
                      class="pick-sku-box"
                      v-for="(sku, skuIndex) in product.skuList"
                      :key="skuIndex"
                    >
                      <view style="display: flex;flex: 1">
                        <image
                          class="check"
                          @click.stop="
                            () => {
                              onClickSKU(skuIndex, productIndex, rootIndex);
                            }
                          "
                          :src="
                            sku.selected == true
                              ? 'https://cdn1.visiotrip.com/h5AndMini/2023-07-11/edit_pick_sed.png'
                              : 'https://cdn1.visiotrip.com/h5AndMini/2023-07-11/check.png'
                          "
                          mode="aspectFit"
                        />
                        <view class="top-box">
                          <view class="sku-name" >
                            {{ sku.skuName }}
                          </view>
                          <text class="sku-desc" style="flex: 1" v-if="sku.packageIncludes">{{sku.packageIncludes}}</text>
                          <text class="sku-desc">{{sku.area ? `${sku.area}平方，` : ''}}{{sku.window ? `${sku.window}，` : ''}}{{sku.maxPerson ? `可住${sku.maxPerson}人` : ''}}</text>
                          <view class="sku-desc">{{sku.cancelRule}} | {{sku.advancePurchaseRule}}</view>
                          <view class="sku-price">￥{{ sku.price }}</view>
                        </view>
                      </view>
                      <view class="bottom-box">
                        <view class="flex-right-box" v-if="sku.selected">
                          <img
                            class="change-btn"
                            src="https://vtrip-sfile.oss-cn-shenzhen.aliyuncs.com/h5AndMini/2023-6-12/ai-change-1.png"
                            @click.stop="
                              () => {
                                handleMinus(skuIndex, productIndex, rootIndex);
                              }
                            "
                          />
                          <view class="roomNight">{{ sku.quantities }}</view>
                          <img
                            class="change-btn"
                            src="https://vtrip-sfile.oss-cn-shenzhen.aliyuncs.com/h5AndMini/2023-6-12/ai-change-2.png"
                            @click.stop="
                              () => {
                                handleAdd(skuIndex, productIndex, rootIndex);
                              }
                            "
                          />
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </block>
            </view>
          </view>
          <view v-else style="color: #404062;font-size: 28rpx; padding-left: 20rpx;">当前没有合适的商品哦</view>
        </scroll-view>
        <view class="bottom">
          <text class="cancel" @click="handlePickPopupCancel">取消</text>
          <text class="confirm" @click="handlePickPopupSure">选好了</text>
        </view>
      </view>
    </uni-popup>
    <uni-popup ref="calendar" type="bottom" :safe-area="false" :mask-background-color="'rgba(0,0,0,0.1)'">
      <view class="calendarBox">
        <view class="calendar-tabs">
          <view :class="{ act: calendarAct === 0, view: true }" @click="calendarAct = 0">
            有明确日期
          </view>
          <!-- <view :class="{ act: calendarAct === 1 }" @click="calendarAct = 1">
                        有大致计划
                    </view> -->
        </view>
        <datePicker
          v-show="calendarAct === 0"
          hideHeader
          @change="calendarChange"
          :startDate="datePickStartEndDate"
          :endDate="datePickStartEndDate"
          :daysCount="daysCount"
        ></datePicker>
        <!-- 没有有大致计划这个选项？
                <view class="have-plan" v-show="calendarAct === 1">
                    <view :class="{ 'active': activeTagIndex === index, 'plan-tag': true }" v-for="(item,index) in planTagList" :key="index" @click="clickTag(item.roughPlanDate,index)">
                        <text>{{ item.roughPlanKey }}</text>
                    </view>
                </view> -->
      </view>
    </uni-popup>
  </view>
</template>

<script>
const globalData = uni.getStorageSync("globalData");
const {
  tripDetail,
  editItinerary,
  updateItinerary,
  editItinerarySelectProduct,
  editItineraryPageTemporary,
} = require("../serve/index.js");
// import {
//   tripDetail,
//   editItinerary,
//   updateItinerary,
//   editItinerarySelectProduct,
//   editItineraryPageTemporary,
// } from "../serve";
import datePicker from "./date-picker1/components/date-picker/date-picker.vue";
import delSlideLeft from "./ay-operate/index.vue";
let observer;
export default {
  emits: ["cancel", "sure"],
  components: {
    // BasicDrag,
    delSlideLeft,
    datePicker,
  },
  props: {
    itineraryPlanId: {
      type: String,
      default: "",
    },
    journeyDemand: {
      type: Object,
      default: {},
    },
    tripData: {
      type: Object,
      default: {},
    },
    conversationId:{
      type: String,
      default: "",
    }
  },
  data() {
    return {
      navHeight:'',
      navTop:'',
      choiceDate: undefined,
      itineraryData: undefined,
      travelDate: "",
      canScroll: true,
      currentTab: -1,
      scrollTop: 0,
      list: [],
      pickList: [],
      scrollInto: "",
      topArr: [],
      scrollTopSize: 0,
      fillHeigt: 0, //填充高度，用于最后一项低于滚动区域时使用
      curIndex: -1,
      pickCurrProduct: undefined,
      pickRecProductList: undefined,
      pickParams: {},
      ///正在编辑的POI
      editingPOI: undefined,
      ///正在编辑的标品
      editingProduct: undefined,
      calendarAct: 0,
      daysCount: 365,
      categoriesOnScreen: new Set(),
      dayIndex: null,
      poiIndex: null,
      isAll: true,
      poiId:''
    };
  },
  computed: {
    tabList() {
      if (this.itineraryData == undefined) return;
      return this.itineraryData?.dayNodeList?.map((item) => {
        return { text: `第${item.dayNum ?? "1"}天` };
      });
    },
    compositeData() {
      let pickCurrProductList;
      if (this.pickCurrProduct == null || this.pickCurrProduct == undefined) {
        pickCurrProductList = [];
      } else {
        pickCurrProductList = [this.pickCurrProduct];
      }
      return [pickCurrProductList, this.pickRecProductList];
    },
    poiArr() {
      let poiArr = [];
      this.itineraryData?.dayNodeList?.map((item) => {
        poiArr.push(...item.simplePoiNodeList);
      });
      return poiArr;
    },
    datePickStartEndDate() {
      return this.choiceDate ? [0]?.re : undefined;
    },
  },
  beforeMount: function () {
		this.setData({
			navHeight: globalData.navHeight || 40,
      navTop: globalData.navTop || 20,
		});
	},
  mounted() {
    this.editItinerary();
    setTimeout(() => {
      this.creatObseerver();
    }, 1000);
  },
  methods: {
    showNoHotel(poi) {
      const hotelList = poi.productList?.filter((item) => {
        return item.productType == "04";
      });
      return poi.hasHotel && !(hotelList?.length > 0);
    },
    showNoProduct(poi) {
      const productList = poi.productList?.filter((item) => {
        return item.productType == "01";
      });
      return poi.hasProduct && !(productList?.length > 0);
    },
    ///弹框出现的时候调用，刷新弹窗的展示数据
    show(parms) {
      // const { itineraryPlanId, journeyDemand } = parms
      // this.itineraryPlanId = itineraryPlanId
      // this.journeyDemand = journeyDemand
      this.editItinerary();
    },
    ///出现的时候，实际发送请求的
    editItinerary() {
      let params = {
        itineraryPlanId: this.itineraryPlanId,
      };
      tripDetail(params)
        .then((res) => {
          this.itineraryData = res.data;
          this.travelDate = res.data.travelDate;
          // this.$nextTick(() => {
          // 	this.getElementTop();
          // });
        })
        .catch((error) => {
          console.log(error);
        });
    },
    changeDate() {
      let params = {
        conversationId: uni.getStorageSync('conversationId'),
        destId: uni.getStorageSync('aiDestItem').destinationId,
        itineraryId: this.itineraryPlanId,
        journeyDemand: {
          startDate: this.travelDate,
          travellerNum: this.journeyDemand,
        },
      };
      ///showLoading 限制最多七个字，使用showToast
      uni.showToast({
        title: "正在为您挑选最佳商品,请稍后...",
        icon: "none",
        duration: 1000,
        mask: true,
      });
      editItinerary(params)
        .then((res) => {
          this.itineraryData = res.data;
          this.travelDate = res.data.travelDate;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 获取元素顶部信息
    getElementTop() {
      new Promise((resolve, reject) => {
        let view = uni.createSelectorQuery().selectAll("content");
        view
          .boundingClientRect((data) => {
            resolve(data);
          })
          .exec();
      }).then((res) => {
        let topArr = res.map((item) => {
          return item.top - this.scrollTopSize;
        });
        this.topArr = topArr;
        let last = res[res.length - 1].height;
        if (last - 20 < this.scrollHeight) {
          this.fillHeigt = this.scrollHeight - last + 20;
        }
      });
    },
    allTab() {
      this.scrollInto = 'item-0'
      this.isAll = true;
    },
    changeTab(val) {
      this.isAll = false;
      this.scrollInto = `item-${val}`;
      this.currentTab = val;
    },
    handleInProductPick(day, index, poiIndex, poi, product) {
      this.dayIndex = index;
      this.poiIndex = poiIndex;
      this.$refs.pick.open("bottom");
      this.queryEditItinerarySelectProduct(
        day,
        poi,
        product,
        product.productType
      );
    },
    handleInPOIPick(day, poi, productType) {
      this.$refs.pick.open("bottom");
      this.queryEditItinerarySelectProduct(day, poi, undefined, productType);
    },
    queryEditItinerarySelectProduct(day, poi, product, productType) {
      this.editingPOI = poi;
      this.editingProduct = product;
      let params = {
        poiId: poi.poiId,
        productType,
        travelDate: day.travelDate,
      };
      if (product != undefined) {
        params.selectSku = {
          stdId: product.stdId,
          skuList: product.skuProductList.map((item) => {
            return { productQuantity: item.quantities, skuId: item.skuId };
          }),
        };
      }
      editItinerarySelectProduct(params)
        .then((resp) => {
          this.poiId = resp.data.poiId;
          const { currProduct, recProductList } = resp.data;
          this.pickCurrProduct = currProduct;
          this.pickRecProductList = recProductList;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    handleMinus(skuIndex, productIndex, rootIndex) {
      const sku = this.compositeData[rootIndex][productIndex].skuList[skuIndex];
      sku.quantities > 1 ? (sku.quantities -= 1) : 1;
    },
    handleAdd(skuIndex, productIndex, rootIndex) {
      const sku = this.compositeData[rootIndex][productIndex].skuList[skuIndex];
      sku.quantities += 1;
    },
    handleItineraryCancel() {
      this.$emit("cancel");
      uni.$emit("changeScrollStatus", true);
    },
    handleItinerarySure() {
      let that = this;
      if(!this.itineraryData){
        return
      }
      let options = {
        itineraryPlanId: that.itineraryPlanId,
        ...this.itineraryData,
      };
      updateItinerary(options)
        .then((resp) => {
          if (resp.data) {
            uni.showToast({
              title: "修改成功",
              icon: "none",
              duration: 3000,
            });
            // that.handlePickPopupCancel()
            // this.$emit("editFina", resp.data.dayNodeList)
            this.$emit("sure", this.itineraryPlanId);
          }
        })
        .catch((error) => {
          console.log(error);
        });
      uni.$emit("changeScrollStatus", true);
    },
    handlePickPopupCancel() {
      // uni.$emit("changeScrollStatus", true);
      this.pickCurrProduct = undefined
      this.pickRecProductList = undefined
      this.$refs.pick.close();
    },
    handlePickPopupSure() {
      //所有编辑时选中的SKU和他对应标品
      let productNodeRequestList = [];
      if (this.pickCurrProduct != null && this.pickCurrProduct != undefined) {
        const product = { ...this.pickCurrProduct };
        let selectedSKU = [];
        for (const sku of this.pickCurrProduct.skuList) {
          ///找出数量大于1 并且被选中的sku
          if (sku.selected == true && sku.quantities > 0) {
            selectedSKU.push(sku);
          }
        }
        productNodeRequestList.push(product);
        product.skuProductList = selectedSKU;
      }
      ///处理推荐的
      if (this.pickRecProductList) {
        for (const product of this.pickRecProductList) {
          let selectedSKU = [];
          for (const sku of product.skuList) {
            ///找出数量大于1 并且被选中的sku
            if (sku.selected == true && sku.quantities > 0) {
              selectedSKU.push(sku);
            }
          }
          if (selectedSKU.length > 0) {
            productNodeRequestList.push(product);
            product.skuProductList = selectedSKU;
          }
        }
      }

      editItineraryPageTemporary({
        itineraryId: this.itineraryPlanId,
        itineraryInfo: this.itineraryData,
        nodeId: this.editingPOI.nodeId,
        productNodeRequestList: productNodeRequestList,
      }).then((resp) => {
        if (resp.success === true) {
          this.itineraryData = resp.data;
        }
      });
      this.pickCurrProduct = undefined
      this.pickRecProductList = undefined
      this.$refs.pick.close();
    },
    onClickSKU(skuIndex, productIndex, rootIndex) {
      const sku = this.compositeData[rootIndex][productIndex].skuList[skuIndex];
      if (sku.selected == true) {
        if (sku.quantities < 1) {
          sku.quantities = 1;
        }
        sku.selected = false;
      } else {
        sku.selected = true;
      }
    },
    handleDel(val) {
      const that = this;
      uni.showModal({
        title: "",
        confirmColor: "#F73B3B",
        cancelText: "取消", // 取消按钮的⽂字
        confirmText: "确认删除", // 确认按钮⽂字
        cancelColor: "#848891", //取消字体的颜⾊
        confirmColor: "#F73B3B",
        content: "是否删除该景点",
        success: function (res) {
          if (res.confirm) {
            that.itineraryData.dayNodeList[val.item.index].simplePoiNodeList =
              that.itineraryData.dayNodeList[
                val.item.index
              ].simplePoiNodeList.filter(
                (item) => item.poiId !== val.item.poiId
              );
            that.handleItinerarySure();
          } else if (res.cancel) {
            console.log("取消删除");
          }
        },
      });
    },
    handleDragEnd(list) {
      this.canScroll = true;
    },
    handleDragStart() {
      this.canScroll = false;
    },
    changeTravelDate() {
      this.$emit('openCalendar')
      // this.$refs.calendar.open();
    },
    closeCalendar(){
      this.$refs.calendar.close();
    },
    //日历选择
    calendarChange({ choiceDate }) {
      this.travelDate = choiceDate.re;
      const format = (date) => date.replaceAll("-", "/");
      this.choiceDate = [{ re: choiceDate.re, format: format(choiceDate.re) }];
      this.changeDate();
      this.$refs.calendar.close();
    },
    leftIndexOfId(id) {
      return Number(id[id.length - 1]);
    },
    creatObseerver() {
      console.log("添加监控");
      if (observer) {
        observer.disconnect();
        observer = undefined;
      }
      observer = uni
        .createIntersectionObserver(this, {
          observeAll: true,
          thresholds: [0, 0.001],
        })
        .relativeTo(".scroll-Y", { top: 0 })
        .observe(".content", (res) => {
          const { intersectionRatio, id, dataset } = res;
          const categoryTabIndex = this.leftIndexOfId(id);
          if (intersectionRatio > 0) {
            this.categoriesOnScreen.add(categoryTabIndex);
          } else {
            this.categoriesOnScreen.delete(categoryTabIndex);
          }
          // categoriesOnScreen保存的是右边显示的所有类目的下标，其中最小的下标就应该是左边选中的下标
          let min = Math.min(...this.categoriesOnScreen);
          console.log("监控到变化", min, res);
          if (!isFinite(min)) {
            min = 0;
          }
          if(min == 0){
            setTimeout(()=>{
              this.isAll = true
            },800)
            
          }else{
            this.isAll = false
          }

          // 如果是最后一个相交的tab大于0.9 是为点击选中
          if(intersectionRatio > 0.9 && dataset.index === this.itineraryData.dayNodeList.length-1){
            this.currentTab = dataset.index
            return
          }
          this.currentTab = min;
        });
    },
    productUrlJump(product){
      let obj = {
        poiId:this.poiId,
        productType:product?.productType,
        productId: product?.stdId,
        supplierProductId: product?.skuList[0]?.productId,
        checkinTime: product?.skuList[0]?.checkinTime,
				checkoutTime:product?.skuList[0]?.checkoutTime,
        rpId: product?.skuList[0]?.skuId,
      }
      this.$productUrlJump(obj, true)
    }
  },
};
</script>

<style lang="scss" scoped>
.scroll-view_H {
  white-space: nowrap;
  .scroll-view-item_H {
    display: inline-block;
    width: 130rpx;
    line-height: 80rpx;
    text-align: center;
    font-size: 28rpx;
  }
}
.nav {
  width: 702rpx;
  height: 80rpx;
  margin: 0 auto;
  padding-bottom: 24rpx;
  .scroll-view-item_H {
    position: relative;
    .icon {
      width: 46rpx;
      height: 14rpx;
      position: absolute;
      left: 8rpx;
      bottom: 0;
    }
  }
  .nav-item {
    color: $sl-color-grey;
    text-align: left;
  }
  .active {
    font-weight: 600;
    color: $sl-color-black;
    text-align: left;
  }
}
.container {
  /* #ifdef H5 */
  height: 100%;
  /* #endif */

  /* #ifndef H5 */
  height: 80vh;
  /* #endif */
  font-family: PingFang SC-Bold, PingFang SC;
  background: #f6f6f9;
  border-radius: 49rpx 49rpx 0rpx 0rpx;
  display: flex;
  flex-direction: column;

  .top {

    .title {
      width: 750rpx;
      height: 108rpx;
      line-height: 108rpx;
      margin: 0 auto;
      text-align: center;
      font-size: 32rpx;
      font-weight: bold;
      color: $sl-color-grey;
    }

    .edit-date {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-left: 20rpx;
      font-size: 32rpx;
      font-weight: normal;
      color: #5876d6;
      // height: 80rpx;
      padding-bottom: 26rpx;
      border-bottom: 1rpx solid #E4E4F4;

      .edit-icon {
        margin-left: 8rpx;
        width: 22rpx;
        height: 22rpx;
      }
    }
  }

  .middle {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
    .content {
      width: 100%;
      background: #f6f6f9;

      .day-index {
        padding: 20rpx;
        font-size: 24rpx;
        color: #4d566a;
        line-height: 36rpx;
        .title {
          font-weight: bold;
        }
      }

      .day-content {
        width: 702rpx;

        opacity: 1;

        .scenic-spot {
          position: relative;
          width: 702rpx;
          display: flex;
          flex-direction: column;
          align-items: stretch;
          padding: 30rpx;
          background: #ffffff;
          box-shadow: 0rpx 1rpx 6rpx 1rpx rgba(0, 0, 0, 0.04);
          border-radius: 16rpx 16rpx 16rpx 16rpx;
          .del-btn {
            position: absolute;
            right: 10rpx;
            width: 40rpx;
            height: 40rpx;
          }
          .poi-info-box {
            display: flex;
            justify-content: space-between;
            flex-direction: row;
            align-items: flex-end;
            padding: 0 11rpx;
          }

          .desc {
            display: flex;
            .poiImgUrl {
              width: 114rpx;
              height: 114rpx;
              border-radius: 10rpx;
              margin-right: 10rpx;
            }
            .poiInfo {
              width: 500rpx;
              flex: 1;
            }
            .desc-item {
              // width: 439rpx;
              // height: 33rpx;
              margin-bottom: 10rpx;
              display: block;
              font-size: 24rpx;
              font-family: PingFangSC-Regular-, PingFangSC-Regular;
              font-weight: normal;
              color: $sl-color-grey;
              line-height: 28rpx;
            }
            .desc-tag {
              font-size: 24rpx;
              color: #F3A921;
              line-height: 24rpx;
              .grey {
                color: #787898;
              }
            }
            .wrap {
              white-space: pre-wrap;
            }
            .name {
              height: 40rpx;
              line-height: 40rpx;
              font-size: 28rpx;
              font-family: PingFang SC-Bold, PingFang SC;
              font-weight: bold;
              color: #4d566a;
            }
            .sku-box {
              margin: 0 10rpx 10rpx 0;
              .sku {
                .name-quantities-box {
                  display: flex;
                  flex-direction: row;
                  justify-content: space-between;
                  font-size: 22rpx;
                  font-family: PingFangSC-Regular-, PingFangSC-Regular;
                  font-weight: normal;
                  color: #848891;
                  .sku-name {
                    white-space: pre-wrap;
                  }
                }
                .total-price {
                  font-size: 22rpx;
                  font-family: PingFang SC-Bold, PingFang SC;
                  font-weight: bold;
                  color: #4d566a;
                }
              }
              .sku:not(:last-child) {
                margin-bottom: 15rpx;
              }
            }
          }
          .index {
            width: 20rpx;
            height: 45rpx;
            font-size: 24rpx;
            color: #bbbbbb;
          }
        }
        .distance {
          width: 526rpx;
          height: 30rpx;
          font-size: 22rpx;
          font-weight: normal;
          color: $sl-color-light-grey;
          line-height: 28rpx;
        }

        .goods-card {
          margin: 34rpx 10rpx 15rpx 10rpx;
          padding: 20rpx;
          background: rgba(228, 228, 244, 0.434);
          border-radius: 16rpx 16rpx 16rpx 16rpx;
          position: relative;
          .product-tips{
            width: 68rpx;
            height: 30rpx;
            border-radius: 0 16rpx 0 16rpx;
            background: #F8B840;
            text-align: center;
            line-height: 30rpx;
            color: #fff;
            font-size: 20rpx;
            position: absolute;
            right: 0;
            top: 0;
          }
          .desc {
            display: flex;
            flex-direction: column;

            .desc-item {
              display: block;
              margin-bottom: 10rpx;
              font-size: 22rpx;
              font-family: PingFangSC-Regular-, PingFangSC-Regular;
              font-weight: normal;
              color: #848891;
              line-height: 28rpx;
            }

            .name-and-price {
              display: flex;
              justify-content: space-between;
              font-size: 26rpx;
              font-family: PingFang SC-Bold, PingFang SC;
              font-weight: bold;
              color: #4d566a;
              line-height: 36rpx;
            }
          }

          .pick-goods {
            width: 582rpx;
            height: 68rpx;
            background: #ffffff;
            border-radius: 34rpx;
            line-height: 68rpx;
            margin: 20rpx auto 10rpx auto;
            text-align: center;
            color: #7696ff;
            opacity: 1;
            font-size: 28rpx;
          }
        }

        .nodata-card {
          width: 642rpx;
          height: 186rpx;
          padding: 20rpx;
          margin: 10rpx auto 0 auto;
          background: rgba(228, 228, 244, 0.434);
          border-radius: 16rpx;
          opacity: 1;
          font-size: 24rpx;
          font-family: PingFangSC-Regular-, PingFangSC-Regular;
          font-size: 20rpx;
          font-weight: 400;
          color: #4d566a;

          .desc {
            text-align: center;
            .desc-item {
              // width: 439rpx;
              // height: 33rpx;
              margin: 27rpx 0;
              display: block;
              font-weight: normal;
              color: #848891;
              line-height: 28rpx;
            }
          }

          .pick-goods {
            width: 582rpx;
            height: 68rpx;
            background: #ffffff;
            border-radius: 34rpx;
            margin: 0 auto;
            line-height: 68rpx;
            text-align: center;
            opacity: 1;
            font-weight: normal;
            color: #7696ff;
            font-size: 28rpx;
          }
        }
      }
    }

    .bottom {
      height: 122rpx;
    }
  }

  .scroll-Y {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .pick-scroll {
    width: 100%;
    flex-grow: 1;
    overflow: hidden;
    flex:1;
  }
  .pick-content {
    .product-group {
      width: 100%;
      display: flex;
      flex-direction: column;
      padding: 0 20rpx 20rpx 20rpx;
      .date {
        font-weight: 600;
        font-size: 28rpx;
        color: #131328;
        line-height: 28rpx;
        padding: 30rpx 32rpx 30rpx 12rpx;
      }
      .product-section {
        background: #ffffff;
        margin: 10rpx 0;
        padding: 30rpx;
        border-radius: 30rpx;
        font-size: 32rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #4d566a;
        line-height: 36rpx;
        .product-section-top {
          display: flex;
          align-items: center;
          padding-bottom: 28rpx;
          border-bottom: 1rpx solid #E4E4F4;
          .product-img {
            width: 126rpx;
            height: 126rpx;
            background: #D8D8D8;
            border-radius: 10rpx;
          }
          .product-section-right {
            flex: 1;
            margin-left: 16rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 126rpx;
            .product-section-time {
              font-size: 24rpx;
              color: #767697;
              line-height: 34rpx;
            }
          }
        }
        .pick-sku-box {
          margin-top: 35rpx;
          display: flex;
          flex:1;
          flex-direction: row;
          .check {
            width: 40rpx;
            height: 40rpx;
            margin-right: 30rpx;
          }
          .top-box {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            font-size: 28rpx;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: bold;
            color: $sl-color-dark-grey;
            flex: 1;
            .sku-name {
              flex: 1;
              margin-bottom: 18rpx;
            }
            .sku-desc {
              font-size: 24rpx;
              color: #404062;
              line-height: 28rpx;
              font-weight: 400;
              margin-bottom: 18rpx;
            }
            .sku-price {
              font-weight: 600;
              font-size: 28rpx;
              color: #F93F55;
              line-height: 28rpx;
            }
          }
          .bottom-box {
            min-height: 44rpx;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: flex-start;
            font-size: 32rpx;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: bold;
            color: #4d566a;
            line-height: 28rpx;
            .sku-name {
            }
            .flex-right-box {
              display: flex;
              align-items: center;
              .change-btn {
                width: 44rpx;
                height: 44rpx;
                flex-shrink: 0;
              }
              .roomNight {
                height: 44rpx;
                line-height: 44rpx;
                padding: 0 30rpx;
                color: $sl-color-grey;
                font-size: 36rpx;
              }
            }
          }
        }
      }
    }
  }
  .pick-popup {
    /* #ifndef H5 */
    // padding-top: 60rpx;
    /* #endif */
    height: 100vh;
    background: #F6F6F9;
    border-top-left-radius: 30rpx;
    border-top-right-radius: 30rpx;
    border: 1rpx solid #fff;
    display: flex;
    flex-direction: column;
    .title {
      width: 100%;
      height: 108rpx;
      background: #ffffff;
      line-height: 108rpx;
      text-align: center;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      font-size: 32rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: $sl-color-black;
    }
  }

  .bottom {
    padding: 17rpx 30rpx calc(20rpx + constant(safe-area-inset-bottom)) 30rpx;
    padding: 17rpx 30rpx calc(20rpx + env(safe-area-inset-bottom)) 30rpx;
    background: #fff;
    display: flex;
    flex-direction: row;

    .cancel {
      width: 306rpx;
      height: 88rpx;
      line-height: 88rpx;
      margin-right: 15rpx;
      text-align: center;
      display: inline-block;
      border-radius: 44rpx;
      opacity: 1;
      border: 1rpx solid $sl-color-blue;
      color: $sl-color-blue;
    }

    .confirm {
      color: #ffffff;
      width: 382rpx;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      display: inline-block;
      background: $sl-color-light-blue;
      border-radius: 44rpx;
      opacity: 1;
      &.active{
        background: rgba(118, 150, 255, .4);
      }
    }
  }
  .calendarBox {
    height: 800rpx;
    border-radius: 30rpx 30rpx 0 0;
    background: #ffffff;
    .calendar-tabs {
      display: flex;
      padding-left: 20rpx;
      font-size: 28rpx;
      color: #696969;
      text-align: center;

      > .view {
        width: 200rpx;
        padding: 36rpx 0;
      }

      .act {
        color: #000;
        font-weight: 600;
        font-size: 30rpx;
      }
    }
  }
  .calendar-tabs {
    display: flex;
    padding-left: 20rpx;
    font-size: 28rpx;
    color: #696969;
    text-align: center;

    > view {
      width: 200rpx;
      padding: 36rpx 0;
    }

    .act {
      color: #000;
      font-weight: 600;
      font-size: 30rpx;
    }
  }

  .calendarBox {
    height: 800rpx;
    border-radius: 30rpx 30rpx 0 0;
    background: #ffffff;
    .have-plan {
      display: flex;
      flex-wrap: wrap;
      padding-top: 57rpx;
      padding-left: 32rpx;
      .plan-tag {
        width: 130rpx;
        height: 60rpx;
        margin-right: 30rpx;
        line-height: 60rpx;
        margin-bottom: 38rpx;
        text-align: center;
        background: #eaeaea;
        border-radius: 10rpx;
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #515151;
      }
      .active {
        width: 130rpx;
        height: 60rpx;
        line-height: 60rpx;
        margin-bottom: 38rpx;
        text-align: center;
        background: #547ae4;
        border-radius: 10rpx;
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
      }
    }
  }
}
.defult-box {
  width: 44rpx;
  height: 44rpx;
  margin-right: 32rpx;
}
.day-no-poi {
  width: 702rpx;
  height: 174rpx;
  background: linear-gradient(135deg, rgba(234,241,255,0.52) 0%, rgba(224,250,255,0.62) 100%);
  border-radius: 26rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin:16rpx auto 0 auto;
  text-align: center;
  color: #4D6181;
  font-size: 32rpx;
}

</style>
